html, body {
	font-family: "Open Sans", Verdana, Arial;
	/*font-size: 12pt;*/
	color: #333;
}
html     			{ width: 100%; height: 100%; margin: 0 auto; overflow-y: scroll;
					  -webkit-tap-highlight-color: rgb(160,161,154); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body				{ width: 100%; min-width: 240px; height: 100%; margin: 0 auto; background: #fff;
					  font-family: 'Open Sans', sans-serif; font-size: 100%; color: #333;
					  line-height: normal; font-weight: normal;
					  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }


article {
	margin-bottom: 40px;
}

h1.title { 
	font-family: "Consolas", "Monaco", "Courier New", monospace;
	text-align: right;
	color: #999;
}

h1					{ font-size: 1.5em; line-height: 2em; }
h2					{ font-size: 1.25em; padding: 1em 0 .5em 0; }
p, li				{ font-size: .85em; padding: 0 0 .75em 0; }

pre {
	background-color: #eaeaea;
}

.mb0 { margin-bottom: 0; }
.mt0 { margin-top: 0; }

#wrap {
	max-width: 55em; margin: 0 auto; padding: 0 2.5em;
	
}


pre {
	padding: 8px;
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}


@media screen and (min-width: 620px) {
  body 					{ font-size: 87.5%; }
  
  #content article		{ width: 30%; padding: 0 3% 0 0; }
}

/* --- 320px --- */
@media screen and (min-width: 319px) {
  body 					{ font-size: 81.3%; min-width: 300px; }
  
  #content article		{ width: 100%; padding: 0; }
  h1, nav				{ width: 100%; text-align: center; }
  nav ul				{ float: none; }
  nav ul li				{ padding: 1em; }
}


/* --- 520px --- */
@media screen and (min-width: 520px) {
  body 					{ font-size: 87.5%; }
  
  h1					{ text-align: left; }
  nav					{ width: 75%; }
  nav ul				{ float: right; }
  nav ul li				{ padding: 1em 0 1em 2em; }
}

  
/* --- 620px --- */
@media screen and (min-width: 620px) {
  body 					{ font-size: 87.5%; }
  
  #content article		{ width: 30%; padding: 0 3% 0 0; }
}

/* --- 750px --- */
@media screen and (min-width: 750px) {
  body 					{ font-size: 93.8%; }
}


/* --- 960px --- */
@media screen and (min-width: 960px) {
  body 					{ font-size: 100%; }
}


/* --- 1600px --- */
@media screen and (min-width: 1600px) {
  body 					{ font-size: 106.3%; }
  
  #wrap				{ max-width: 65em; padding: 0 2.5em; }
}


/* --- 2400px --- */
@media screen and (min-width: 2400px) {
  body 					{ font-size: 118.8%; }
}

/* --- 320px --- */
@media screen and (max-width: 319px) {
  body 					{ font-size: 80%; min-width: 300px; }
  
  #content article		{ width: 100%; padding: 0; }
  h1, nav				{ width: 100%; text-align: center; }
  nav ul				{ float: none; }
  nav ul li				{ padding: 1em; }
}